import React, {useMemo, useRef} from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const LineChartsBookStat = ({
                                statisticalCenterData = {},
                                exchange = '',
                                frequency = '',
                                selectedData
                            }) => {
    const chartContainerRef = useRef(null); // 用于全屏切换的容器引用
    const recentDaysList = Array.isArray(statisticalCenterData) ? statisticalCenterData.map(item => item.time) : [];
    // 配置数据 当天没有数据的值设为0
    const formatData = useMemo(() => {
        let newData = {};

        recentDaysList.forEach(() => {
            if (statisticalCenterData && Object.keys(statisticalCenterData).length === 0) {
                return {};
            }
            newData.avg_price = statisticalCenterData.map(item => item.avg_price);
            newData.average_buy_price = statisticalCenterData.map(item => item.average_buy_price);
            newData.average_sell_price = statisticalCenterData.map(item => item.average_sell_price);
            newData.median_sell_price = statisticalCenterData.map(item => item.median_sell_price);
            newData.median_buy_price = statisticalCenterData.map(item => item.median_buy_price);
            newData.buy_sell_big_volume = statisticalCenterData.map(item => (item.buy_big_volume - item.sell_big_volume));
            newData.total_sell_volume = statisticalCenterData.map(item => item.total_sell_volume);
            newData.total_buy_volume = statisticalCenterData.map(item => item.total_buy_volume);
            newData.total_buy_sell_volume = statisticalCenterData.map(item => item.total_buy_volume - item.total_sell_volume);
            newData.total_buy_big_price = statisticalCenterData.map(item => item.total_buy_big_price);
            newData.total_sell_big_price = statisticalCenterData.map(item => item.total_sell_big_price);
            newData.total_big_buy_sell_price = statisticalCenterData.map(item => (item.total_buy_price - item.total_sell_price));
            newData.median_sell_volume = statisticalCenterData.map(item => item.median_sell_volume);
            newData.median_buy_volume = statisticalCenterData.map(item => item.median_buy_volume);
            newData.sell_near_volume = statisticalCenterData.map(item => item.sell_near_volume);
            newData.buy_near_volume = statisticalCenterData.map(item => item.buy_near_volume);
            newData.buy_sell_near_volume = statisticalCenterData.map(item => (item.buy_near_volume-item.sell_near_volume));
        });
        return newData;
    }, [statisticalCenterData]);

    const series = [
        selectedData.includes('avg_price') && {
            name: '平均成交价',
            data: formatData.avg_price,
            yAxis: 0
        },
        selectedData.includes('buy_sell_big_volume') && {
            name: '大单挂牌量（买-卖）',
            data: formatData.buy_sell_big_volume,
            yAxis: 1
        },
        selectedData.includes('total_buy_volume') && {
            name: '买单量',
            data: formatData.total_buy_volume,
            yAxis: 1
        },
        selectedData.includes('total_sell_volume') && {
            name: '卖单量',
            data: formatData.total_sell_volume,
            yAxis: 1
        },
        selectedData.includes('total_buy_sell_volume') && {
            name: '买入数量（买-卖）',
            data: formatData.total_buy_sell_volume,
            yAxis: 1
        },
        selectedData.includes('total_buy_big_price') && {
            name: '总的大单买入价值',
            data: formatData.total_buy_big_price,
            yAxis: 0
        },
        selectedData.includes('total_sell_big_price') && {
            name: '总的大单卖出价值',
            data: formatData.total_sell_big_price,
            yAxis: 0
        },
        selectedData.includes('total_big_buy_sell_price') && {
            name: '大单买卖价值(买-卖)',
            data: formatData.total_big_buy_sell_price,
            yAxis: 1
        },
        selectedData.includes('average_buy_price') && {
            name: '平均买价',
            data: formatData.average_buy_price,
            yAxis: 0
        },
        selectedData.includes('average_sell_price') && {
            name: '平均卖价',
            data: formatData.average_sell_price,
            yAxis: 0
        },
        selectedData.includes('median_sell_price') && {
            name: '中位数卖价',
            data: formatData.median_sell_price,
            yAxis: 0
        },
        selectedData.includes('median_buy_price') && {
            name: '中位数买价',
            data: formatData.median_buy_price,
            yAxis: 0
        },
        selectedData.includes('median_sell_volume') && {
            name: '中位数买单中每笔数量',
            data: formatData.median_sell_volume,
            yAxis: 1
        },
        selectedData.includes('median_sell_volume') && {
            name: '中位数卖单中每笔数量',
            data: formatData.median_buy_volume,
            yAxis: 1
        },
        selectedData.includes('sell_near_volume') && {
            name: '<100卖单数量',
            data: formatData.sell_near_volume,
            yAxis: 1
        },
        selectedData.includes('buy_near_volume') && {
            name: '<100买单数量',
            data: formatData.buy_near_volume,
            yAxis: 1
        },
        selectedData.includes('buy_sell_near_volume') && {
            name: '<100数量（买-卖） ',
            data: formatData.buy_sell_near_volume,
            yAxis: 1
        },
    ].filter(Boolean); // 去除空值

    // 图表配置
    const options = {
        chart: {
            style: {
                fontSize: '1em'
            },
        },
        title: {
            text: exchange,
            align: 'left'
        },
        yAxis: [{ // 第一个 Y 轴
            title: {
                text: '价格'
            }
        }, { // 第二个 Y 轴
            title: {
                text: '数量'
            },
            opposite: true // 使第二个 Y 轴在右侧
        }],
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        xAxis: {
            categories: recentDaysList.map(item => {
                if (frequency === "minute" || frequency === "five_minute") {
                    return item.substring(11,16)
                } else if(frequency === "hour"){
                    return item.substring(11,16)
                } else if(frequency === "day"){
                    return item.substring(5,10)
                }
                return item;
            })
        },
        series: series,
        tooltip: {
            headerFormat: '<b>{point.x}</b><br>', // 显示时间（X轴）
            pointFormat: '{series.name}: {point.y}<br>', // 显示每个数据点的值
            shared: true, // 显示多个系列的数据
            crosshairs: true, // 显示十字准线
        },
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        },
        credits: {
            enabled: false
        }
    };

    // 全屏切换功能
    const toggleFullScreen = () => {
        if (!document.fullscreenElement) {
            chartContainerRef.current.requestFullscreen().catch(err => {
                console.error(`Error attempting to enable full-screen mode: ${err.message}`);
            });
        } else {
            document.exitFullscreen();
        }
    };

    return (
        <div ref={chartContainerRef} style={{ cursor: 'pointer' }}>
            <HighchartsReact
                highcharts={Highcharts}
                options={options}
            />
        </div>
    );
};

export default LineChartsBookStat;
